/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="table-data">
        <sf-grid>
            <sf-toolbar ref="toolbar">
                <sf-button
                    ref="submit"
                    class="creat-button btn-blank"
                    icon-cls="iconrefresh"
                    @click="_refresh">
                    <lang>刷新</lang>
                </sf-button>
            </sf-toolbar>
            <sf-table 
                ref="aiflowVersionTable" 
                :options="options_fix"
                @pagechange="_onPageChange"
                @sizechange="_onSizeChange">
                <sf-table-column :default-width="20"
                                 type="index">
                    <lang>序号</lang>
                </sf-table-column>
                <sf-table-column data-index="createTime"
                                 :default-width="40">
                    <lang>更新时间</lang>
                </sf-table-column>
                <sf-table-column data-index="versionName"
                                 :default-width="40">
                    <lang>版本名称</lang>
                </sf-table-column>
                 <sf-table-column data-index="description"
                                 :default-width="70">
                    <lang>描述</lang>
                </sf-table-column>
                <sf-table-column data-index="taskNum"
                                 :default-width="20">
                    <lang>任务数</lang>
                </sf-table-column>
                <sf-table-column data-index="opr"
                                 :default-width="90">
                    <lang>操作</lang>
                </sf-table-column>
                <template slot="createTime"
                          slot-scope="{record}">
                    {{ encodeTime(record.createTime) }}
                </template>
                <template slot="createTime"
                          slot-scope="{record}">
                    {{ encodeTime(record.createTime) }}
                </template>
                <template slot="opr"
                          slot-scope="{record}">
                    <div class="opr">
                        <a 
                            class="link-btn"
                            @click="_enterAIFlowDetail(record)">
                            <lang>查看详情</lang>
                        </a>
                        <a 
                            class="link-btn"
                            @click="_editAIFlowDescription(record)">
                            <lang>编辑描述</lang>
                        </a>
                        <a 
                            class="link-btn"
                            @click="_deleteAIFlowDetail(record)">
                            <lang>删除</lang>
                        </a>
                    </div>
                </template>
            </sf-table>
        </sf-grid>
    </div>
</template>
<script>
import {
    encodeDate
} from 'src/util/format';

// import parseJson from 'src/util/parse_json.ts';
import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';

import { setStorage } from 'src/util/local_storage';

import editAIFlowDescriptionForm from '../label_form/edit_aiflow_description.vue';


/* 训练状态 */
const PAGE_COUNT = 10;

export default {
    name: 'PeriodChildTask',
    props:{
        aiflowId:{
            type:String,
            default:''
        },
      
    },
    data () {
        return {
            searchParams: {
                pageSize: PAGE_COUNT,
                pageNum: 1,
            },
            defaultWidth:200,
            showEmptytraining:false,
            emptyText:_('没有找到对应的模型'),
            options_fix: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true,
                autoHeight:true,
                pagination: {
                    activePage: 1,
                    pageSize: PAGE_COUNT,
                    pageSizes: [Number('10'), Number('20'), Number('50')],
                    layout: [ 'pager', 'sizes', 'jumper']
                }
            },
            flowList:[],
            flowId:'',
        
        };
    },
    computed: {
        projectId () {
            return this.$route.query.projectId || '';
        }

    },
    watch: {
        aiflowId () {
             this.refreshGrid();
        }
    },
    methods: {
        _createAIFlowDescriptionFormWin () {
             if (!this.editAIFlowDescriptionFormWin) {
                this.editAIFlowDescriptionFormWin = this.$modal(editAIFlowDescriptionForm, {
                    autoDestory: true
                });
            }
            return this.editAIFlowDescriptionFormWin;
        },
            // 编辑Flow
        _editAIFlowDescription (record) {
            let formWin = this._createAIFlowDescriptionFormWin();
            formWin.formRoot.setJsonValue(record);
            this.editAIFlowDescriptionFormWin.open({
                title: _('编辑AI Flow版本描述'),
                submit: () => {
                    let ajaxParams = this.editAIFlowDescriptionFormWin.formRoot.getJsonValue();
                    let params = Object.assign(record, ajaxParams);
                    this.ajaxSubmitAIFlowDescription(params, this.editAIFlowDescriptionFormWin);
                }
            });
        },

        // 执行删除操作
        async ajaxSubmitAIFlowDescription (params, formWin) {
            this.$mask();
            let jsonData = await this.$ajax.put(`${trainingUrlAdapter('interactiveFlow')}/${params.aiFlowId}/version`,params);
            this.$unmask();
            let { success, msg } = jsonData;
            if (!success) {
                return this.$showErr(msg || _('编辑失败'));
            }
            this.$ok(_('编辑成功'));
            formWin.hide();
            this.refreshGrid();
        },
        // 刷新grid
        async refreshGrid () {
            this.$mask();
            const TRAINING_GET_URL = trainingUrlAdapter(`interactiveFlow/${this.aiflowId}/version`);
            let jsonData = await this.$ajax.get(TRAINING_GET_URL, this.searchParams);
            this.$unmask();
            let table = this.$refs.aiflowVersionTable;
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                table.loadData([]);
                return;
            }
            if (!table) {
                return;
            }
            this.showEmptytraining = data.list.length === 0;
            table.loadData(data.list || []);
            table.getPagination().setTotal(data.total);
        },

        encodeTime (time) {
            return encodeDate(time);
        },
        async ajaxDeleteAIFlowVersion (record) {
            const DELETE_URL = trainingUrlAdapter(`interactiveFlow/${record.aiFlowId}/version`);
            this.$mask();
            let jsonData = await this.$ajax.delete(DELETE_URL);
            this.$unmask();
            let {success, msg} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.$ok(_('删除成功'));
            this.refreshGrid();
        },
        _deleteAIFlowDetail (record) {
            this.$confirm({
                title: _('提示'),
                subTitle: _('确定要删除{0}版本吗？', record.versionName),
                msg: _('删除后，操作无法撤回，请谨慎操作！'),
                icon: 'warning',
                autoClose: true,
                callback: actionName => {
                    if (actionName === 'submit') {
                        this.ajaxDeleteAIFlowVersion(record);
                    }
                }
            });
        },
        _onPageChange (pageNum) {
            Object.assign(this.searchParams, {
                pageNum: pageNum
            });
            this.refreshGrid();
        },
        _onSizeChange (nowPageIndex, nowPageSize) {
            Object.assign(this.searchParams, {
                pageNum: nowPageIndex,
                pageSize: nowPageSize
            });
            this.refreshGrid();
        },
        _refresh () {
            this.refreshGrid();
        },
        _enterAIFlowDetail (item) {
            setStorage('pipelineInfo', JSON.stringify(item));
            this.$router.push({
                path: `/project_manager/pipeline_detail`,
                query: Object.assign(this.$route.query, {interactFlowName:item.versionName})
            });
        }
    },
};
</script>
